<template>
  <view class="container">
    <view>

      <scroll-view @scroll="scroll" :scrollIntoView="scrollToViewId" :scrollTop="scrollTop" :scroll-y="true"
                   style="height:100%;overflow:scroll">
        <view id="scroll_view_tab0">
          <view class="swiper-container">
            <swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="5000"
                    @change="swiperChange">
              <view v-if="product.vehpics&&product.vehpics.length>0">
                <swiper-item class="swiper-item" v-for="(item ,index) in vehicleImage"
                             :key="index">
                  <view class="swiper-item-view">
                    <!-- <image class="img" :src="imgurl+product.pic" mode="aspectFill" /> -->

                    <!-- <image class="img" :src="imgurl+item" /> -->
                    <ImagePreview :image="item" :index="index" :url="imgurl"
                                  :classstyle="{
                      width:'100%',height:'100%'
                                  }">
                    </ImagePreview>
                  </view>
                </swiper-item>
              </view>
              <swiper-item class="swiper-item" v-else
                           :key="1">
                <view class="swiper-item-view">
                  <image src="../../static/images/default/cdxny_20240416144029.png" style="width: 100%;height:100%"/>
                </view>
              </swiper-item>
              <!-- </block> -->
            </swiper>
            <!--
        <view class="imageCount">{{current+1}}/{{(product.pics).length}}</view>
        <view v-if="product.video" class="provideo" @tap="payvideo"><image src="/static/img/video.png"/><view class="txt">{{product.video_duration}}</view></view> -->
            <view class="cankaoyangtu" v-if="product.vehpics">
              <!--              <text>系统所选车辆型号及颜色仅供参考, 请以实际门店提供为准</text>-->
              <text>{{ current + 1 }}/{{ (product.vehpics.split(',')).length }}</text>
            </view>
          </view>
          <view class="header">
            <view v-if="product.price_type != 1 || product.min_price > 0">
              <view class="price_share">
                <view class="">
                  <view class="title">{{ product.name }}

                  </view>
                  <view class="xinhao" v-if="product.vehicleParams">
                    <view class="" v-for="(item,index) in product.vehicleParams" :key="index"
                          v-if="item">
                      {{ item }}
                      <text style="margin: 0 10upx;"
                            v-if="index !== product.vehicleParams.length - 1 && product.vehicleParams[index + 1] !== null">
                        /
                      </text>
                    </view>
                  </view>
                </view>
                <text @tap="viewVehicleDetail"
                      class="vehicle-detail">
                  详情
                </text>
              </view>
              <view class="shijianaddres">
                <!--   时间控件-->
                <uni-number-box :min="1" step="1" v-model="timepoint.day" @change="numberStep" class="float-right-day"/>
                <view class="sjleft">
                  <uni-datetime-picker type="datetime" @change="changePickupTime" ref="pickTime"
                                       :hide-second="true"
                                       v-model="timepoint.apiobj[0]"
                                       :end="timepoint.endTime"
                                       :start="new Date().getTime()">
                    <view class="shijian">
                      <text class="tit">
                        取车
                      </text>
                      {{ timepoint.time[0] }}
                    </view>
                  </uni-datetime-picker>

                </view>
                <!--                <view class="sjcent">-->
                <!--                  <view class="">-->
                <!--                    <uni-icons type="undo" color="#007aff" size="14" @click="baochefuwu(timepoint.day-1)"/>-->
                <!--                    {{ timepoint.day }}天-->
                <!--                    <uni-icons type="redo" color="#007aff" size="14" @click="baochefuwu(timepoint.day+1)"/>-->
                <!--                  </view>-->
                <!--                  <image src="../../static/images/jiantouyou.png" mode=""></image>-->
                <!--                </view>-->
                <view class="sjright">
                  <uni-datetime-picker type="datetime" @change="changeCollectionTime"
                                       v-model="timepoint.apiobj[1]"
                                       ref="collectionTime" disabledDate="disabledCollectionDate"
                                       :start="timepoint.startTime">
                    <view class="shijian">
                      <text class="tit">
                        还车
                      </text>
                      {{ timepoint.time[1] }}
                    </view>
                    <!--                    <view class="addres">-->
                    <!--                      <view class="map" style=" ">-->
                    <!--                        <text>{{ inputvalue2[0] || business }}</text>-->
                    <!--                      </view>-->
                    <!--                    </view>-->
                  </uni-datetime-picker>
                </view>
              </view>

              <view class="quchefanghsi">
                <!-- 	<view class="tishi">
                    提示：本门店{{
                      business.ranges == 0 ? '只支持门店自取' : '支持送车上门(10000km内)，也可以默认选择门店自取'
                    }}!
                  </view> -->
                <!--                <uni-forms-item label="取车方式" label-width="120upx" required>-->
                <!--                  <uni-data-checkbox v-model="gettype" @change="checkboxfun"-->
                <!--                                     :localdata="gettypelist"/>-->
                <!--                </uni-forms-item>-->
                <view class="baochefuwu">
                  <view class="baoche">
                    <view :class="[item==baocheitemnum?'baocheitem-active baocheitem':'baocheitem']"
                          @tap="baochefuwu(item)" v-for="(item,index) in [7,15,20,30]" :key="index">
                      {{ item }}天
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view id="scroll_view_tab1">
          <view class=" baochefuwu">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">取车方式</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <uni-data-checkbox v-model="gettype" @change="checkboxfun"
                               :localdata="gettypelist"/>
            <view class="shijianaddres">
              <view class="sjleft">
                <view class="shijian">
                  <text class="tit">
                    取车地址：
                    <text class="addres">{{ inputvalue2 ? inputvalue2[0] : business }}</text>
                  </text>
                </view>
              </view>
            </view>

          </view>
          <!--          <view class="jiashiyuanbox" @tap="gojiashiyuanlist">-->
          <!--            <view class="detail_title">-->
          <!--              <view class="t1"></view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t0">选择驾驶员</view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t1"></view>-->
          <!--            </view>-->
          <!--            <view class="jiashiyuanxinxi">-->

          <!--              <view class="jiashiyuanitem">-->
          <!--                <view class="fl">-->
          <!--                  <view class="tit">-->
          <!--                    驾驶员：-->
          <!--                    <text class="info">{{ driverobj.driverName }}</text>-->
          <!--                  </view>-->

          <!--                </view>-->
          <!--                <uni-icons custom-prefix="iconfont" type="icon-tongxunlu" size="20"-->
          <!--                           color="#2979ff" style="float:right;margin-right:18px"></uni-icons>-->
          <!--                &lt;!&ndash;                <uni-icons custom-prefix="iconfont" type="icon-renyuan" size="" color="#2979ff"&ndash;&gt;-->
          <!--                &lt;!&ndash;                           style="float:right;"/>&ndash;&gt;-->
          <!--              </view>-->
          <!--              <view class="jiashiyuanitem">-->
          <!--                <view class="fl">-->
          <!--                  <view class="tit">-->
          <!--                    身份证：-->
          <!--                    <text class="info">{{-->
          <!--                        driverobj.driverIdCard ? flitertext(driverobj.driverIdCard, 6, 4) : '无'-->
          <!--                      }}-->
          <!--                    </text>-->
          <!--                  </view>-->
          <!--                </view>-->

          <!--              </view>-->
          <!--              <view class="shoujihao jiashiyuanitem">-->
          <!--                <view class="fl">-->
          <!--                  <view class="tit">-->
          <!--                    联系手机：-->
          <!--                    <text class="info">{{-->
          <!--                        driverobj.driverPhone ? flitertext(driverobj.driverPhone, 4, 4) : '无'-->
          <!--                      }}-->
          <!--                    </text>-->
          <!--                  </view>-->
          <!--                </view>-->

          <!--              </view>-->
          <!--            </view>-->
          <!--          </view>-->
          <!--          <view class="yajinbox" v-if="product.appointmentFee">-->
          <!--            <view class="detail_title">-->
          <!--              <view class="t1"></view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t0">定金</view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t1"></view>-->
          <!--            </view>-->
          <!--            <view class="table">-->
          <!--              <uni-tr>-->
          <!--                <uni-td>租车定金</uni-td>-->
          <!--                <uni-td>-->
          <!--                  <text :class="[product.openAppointment?'':'shanchu']"-->
          <!--                        style="margin-right: 10upx;">￥{{ product.appointmentFee }}-->
          <!--                  </text>-->
          <!--                  <text style="color: #43c900;">预约车辆后定金可退，用来预订车辆金额</text>-->

          <!--                </uni-td>-->
          <!--              </uni-tr>-->
          <!--            </view>-->
          <!--          </view>-->
          <!--          v-for="(item ,index) in vehicleImage-->
          <view class="yajinbox">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">车辆图片</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <view class="vehicle-name">{{ product.name }}</view>
            <ImagePreview :classstyle="{width:'100%'}" :image="item" :index="index" :key="index" :url="imgurl"
                          v-for="(item ,index) in vehicleImage">
            </ImagePreview>
          </view>
          <view class="yajinbox">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">押金</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <view class="table">
              <uni-table stripe emptyText="暂无更多数据" border>
                <uni-tr>
                  <uni-td>租车押金</uni-td>
                  <uni-td>
                    <text :class="[product.depositway==0?'shanchu':'xianshi']"
                          style="margin-right: 10upx;">￥{{ product.deposit }}
                    </text>
                    <text style="color: #43c900;" v-if="product.depositway==0">到店验证成功后免收</text>
                    <text v-else>可退
                    </text>
                  </uni-td>
                </uni-tr>
                <uni-tr>
                  <uni-td>违章押金</uni-td>
                  <uni-td>
                    <text :class="[product.depositway==0?'shanchu':'xianshi']"
                          style="margin-right: 10upx;">￥{{ product.violationDeposit }}
                    </text>
                    <text style="color: #43c900;" v-if="product.depositway==0">到店验证成功后免收
                    </text>
                    <text v-else>可退
                    </text>
                  </uni-td>
                </uni-tr>
              </uni-table>
              <uni-forms-item v-if="product.depositway==1" label="押金" label-width="120upx" required>
                <uni-data-checkbox v-model="yjgettype" @change="checkboxfun2"
                                   :localdata="yjgettypelist"/>
              </uni-forms-item>
              <view class="text">
                可以取车时支付押金
              </view>
            </view>
          </view>
          <!--          <view class="cheliangbaozhang">-->
          <!--            <view class="detail_title">-->
          <!--              <view class="t1"></view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t0">车辆保障</view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t1"></view>-->
          <!--            </view>-->
          <!--            <view class="cheliangbaozhangbox">-->
          <!--              <view class="jichufuwu flex-x-center">-->
          <!--                <view class="left">-->
          <!--                  <view class="title">-->
          <!--                    基础服务-->
          <!--                  </view>-->
          <!--                  <view class="xieyi">-->
          <!--                    <view class="text">-->
          <!--                      您无需承担车辆损失超过1500元的部分(含玻璃)，轮胎及其他不在服务范围内的损失详见详情-->
          <!--                    </view>-->
          <!--                    <view class="text">-->
          <!--                      您无需承担行车致使第三方人身或财产损失50万以内的部分-->
          <!--                    </view>-->
          <!--                    <view class="text">-->
          <!--                      您需要承担车辆停运费-->
          <!--                    </view>-->

          <!--                  </view>-->
          <!--                </view>-->
          <!--                <view class="right">-->
          <!--                  <text class="redprice">￥{{ zjserviceFees }}</text>-->
          <!--                  <text v-if="zjserviceFees">已含</text>-->
          <!--                  <text v-else>未含</text>-->
          <!--                </view>-->
          <!--              </view>-->
          <!--              <view v-if="product.zxServiceFee" class="zunxingfuwu flex-x-center">-->
          <!--                <view class="dingwei">-->
          <!--                  80%的人选择升级尊享服务，保障出行安全-->
          <!--                </view>-->
          <!--                <view class="left">-->
          <!--                  <view class="title">-->
          <!--                    尊享服务-->
          <!--                  </view>-->
          <!--                  <view class="xieyi">-->
          <!--                    <view class="text">-->
          <!--                      您无需承担全部车辆损失(含玻璃)，轮胎及其他不在服务范围内的损失详见详情-->
          <!--                    </view>-->
          <!--                    <view class="text">-->
          <!--                      您无需承担行车致使第三方人身或财产损失50万以内的部分-->
          <!--                    </view>-->
          <!--                    <view class="text">-->
          <!--                      您需要承担车辆停运费-->
          <!--                    </view>-->

          <!--                  </view>-->
          <!--                </view>-->
          <!--                <view class="right">-->
          <!--                  <text class="redprice">+￥{{ product.zxServiceFee * timepoint.day }}</text>-->
          <!--                  <uni-icons @tap="checkboxfilledfun"-->
          <!--                             :type="checkboxfillednum==1?'checkbox-filled':'circle'" size="20"-->
          <!--                             :color="checkboxfillednum==1?'#2979ff':''"></uni-icons>-->
          <!--                </view>-->
          <!--              </view>-->
          <!--            </view>-->
          <!--          </view>-->
          <view class="quchecailiao">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">取车材料</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <view class="quchecauliaobox">
              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    驾驶员本人身份证原件
                  </view>
                </view>
              </view>
              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    驾驶人本人驾照原件
                  </view>
                  <!--                  <view class="text">-->
                  <!--                    有效期两个月以上-->
                  <!--                  </view>-->

                </view>

              </view>
              <view style="margin-top: 10upx;padding-left: 14upx;position: relative;top:14upx">
                证件需在有效期内
              </view>
              <!--              <view class="quchecailiaoitem">-->
              <!--                <view class="log">-->
              <!--                  <image src="/static/tabbar/my.png" mode=""></image>-->
              <!--                </view>-->
              <!--                                <view class="content">-->
              <!--                                  <view class="tit">-->
              <!--                                    驾驶员本国内信用卡-->
              <!--                                  </view>-->
              <!--                                  <view class="text">-->
              <!--                                    有效期0个月以上，用于到店刷取押金-->
              <!--                                  </view>-->

              <!--                                </view>-->
              <!--              </view>-->
            </view>
          </view>
          <view class="quchecailiao">
            <view class="detail_title">
              <view class="t1"></view>
              <view class="t2"></view>
              <view class="t0">租车必读</view>
              <view class="t2"></view>
              <view class="t1"></view>
            </view>
            <view class="quchecauliaobox">
              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    取消政策
                  </view>
                  <view class="table">
                    <uni-table stripe emptyText="暂无更多数据" border>
                      <uni-tr>
                        <uni-th align="center">取消时间</uni-th>
                        <uni-th align="center">扣费标准</uni-th>
                      </uni-tr>
                      <uni-tr>
                        <uni-td>提交订单10分钟内</uni-td>
                        <uni-td>免费取消</uni-td>
                      </uni-tr>
                      <uni-tr>
                        <uni-td>
                          <view class="">
                            提交订单10分钟后-取车时间
                          </view>
                        </uni-td>
                        <uni-td>扣除违约金30%</uni-td>
                      </uni-tr>

                    </uni-table>
                  </view>
                  <view class="text">
                    注:取消订单的违约金的计算基数为订单的【租车费】、【基础服务费】、【送车上门服务费】之和，减去订单中已使用的优惠的金额。
                  </view>
                </view>
              </view>

              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    里程限制
                  </view>
                  <view class="text">
                    <text v-if="product.limitKilometerDay">
                      租期内日限行{{ product.limitKilometerDay }}公里
                    </text>
                    <text v-if="product.limitKilometerMonth&&product.limitKilometerDay">
                      ，
                    </text>
                    <text v-if="product.limitKilometerMonth">
                      月限行{{ product.limitKilometerMonth }}(超里程与门店经理确认计价)
                    </text>
                    <text v-if="(!product.limitKilometerDay&&!product.limitKilometerMonth)">
                      详情见合同
                    </text>
                  </view>
                </view>
              </view>
              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    能源费用及服务费
                  </view>
                  <view class="text">
                    还车时需保持与取车时能源量(油量/电量/燃料量)一致
                  </view>
                  <view class="text">
                    若还车时能源量多于/少于发车能源量，涉及相关费用的结算标准，请以门店告知为准
                  </view>
                </view>
              </view>
              <view class="quchecailiaoitem">
                <view class="log">
                  <image src="/static/tabbar/my.png" mode=""></image>
                </view>
                <view class="content">
                  <view class="tit">
                    禁行区域
                  </view>
                  <view class="text">
                    禁止驶出省内
                    <!--                   ： {{ product.prohibitedAreas }}-->
                  </view>
                </view>
              </view>

            </view>
          </view>
          <!--          <view class="cheliangmiaoshu">-->
          <!--            <view class="detail_title">-->
          <!--              <view class="t1"></view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t0">车辆描述</view>-->
          <!--              <view class="t2"></view>-->
          <!--              <view class="t1"></view>-->
          <!--            </view>-->
          <!--            <view class="detail">-->
          <!--              &lt;!&ndash; <dp :pagecontent="pagecontent"></dp> &ndash;&gt;-->
          <!--              <view class="img" style="width: 100%;">-->
          <!--                <uni-title type="h4" title="行驶证照片"/>-->
          <!--                <ImagePreview v-if="product.vehDrivingPic" :imagelist="[product.vehDrivingPic]"-->
          <!--                              :image="product.vehDrivingPicPeiw" :url="imgurl" :classstyle="{-->
          <!--                  height: '180rpx',-->
          <!--                  width:'30%',-->
          <!--                }">-->
          <!--                </ImagePreview>-->
          <!--                &lt;!&ndash;                <image src="../../static/images/default/drivingimg.jpg" style="height: 180rpx" v-else/>&ndash;&gt;-->
          <!--                <uni-title type="h4" title="年检照片"/>-->
          <!--                <ImagePreview v-if="product.vehCheckPic" :imagelist="[product.vehCheckPic]"-->
          <!--                              :image="product.vehCheckPicPeiw" :url="imgurl" :classstyle="{-->
          <!--                  height: '180rpx',-->
          <!--                  width:'30%',-->
          <!--                }">-->
          <!--                </ImagePreview>-->
          <!--                &lt;!&ndash;                <image src="../../static/images/default/nianjian.jpg" style="height: 180rpx" v-else/>&ndash;&gt;-->
          <!--                <uni-title type="h4" title="保险文件"/>-->
          <!--                <view class="file-show">-->
          <!--                  <view v-if="product.vehInsurancePic" @tap="openInsurance(item)"-->
          <!--                        v-for="(item,index) in file.fileUrl" :key="item"-->
          <!--                        class="view-filled">-->
          <!--                    <image src="../../static/images/pdf.png" style="width: 90rpx;height:90rpx"/>-->
          <!--                    <view class="name">{{ file.fileName[index] }}</view>-->
          <!--                  </view>-->
          <!--                </view>-->
          <!--              </view>-->

          <!--              <rich-text :nodes="product.content"></rich-text>-->
          <!--            </view>-->
          <!--          </view>-->
        </view>
        <view style="width:100%;height:140rpx;"></view>
      </scroll-view>

      <view class="bottombar flex-row">
        <view class="zxzfprice" style="font-size: 24upx;">
          <view class="top">
            <view class="zxzf">
              在线支付
            </view>
            <view class="price" style="color: red;margin-left: 10upx;">
              ￥
              <text class="num" style="font-size: 30upx;">
                {{ zjprice }}
              </text>
            </view>

          </view>
          <view class="text" style="color: #999; font-size: 24upx;margin-top: 10upx;">
            含车辆手续费￥{{ product.fee }}，基础服务费￥{{ zjserviceFees }}
          </view>

        </view>
        <!-- <view class="tobuy flex-x-center flex-y-center" v-if="product.iszu==1" @click="tobuy">
          已被租用
        </view> -->
        <view class="mingxi" style="color: #2979ff;font-size: 26upx;margin-right: 20upx;"
              @tap="$refs.mingxipopup.open()">
          明细
        </view>
        <!--        <button class="tobuy flex-x-center flex-y-center"-->
        <!--              style="background: linear-gradient(90deg, #FE6035, #EF1224);" @click="tobuy">-->
        <!--          立即支付-->
        <!--        </button>-->
        <button type="primary" class="tobuy flex-x-center flex-y-center"
                style="padding-left: 10px;padding-right: 10px;border-radius: 5px;"
                @click="tobuy">
          去支付
        </button>
      </view>
    </view>
    <uni-popup ref="mingxipopup" type="bottom" background-color="reba(0,0,0,0)">
      <!--      <view class="popup-content feiyongmingxi">-->
      <!--        <view class="content">-->
      <!--          <view class="fybox" v-if="!zjzxAppointmentFee">-->
      <!--            <view class="feiyong">-->
      <!--              <text class="title">车辆租金合计</text>-->
      <!--              <text class="price">￥{{ product.money * timepoint.day }}</text>-->
      <!--            </view>-->
      <!--          </view>-->
      <!--          <view class="fybox">-->

      <!--            <view class="feiyong" v-if="zjzxAppointmentFee">-->
      <!--              <view class="">-->
      <!--                <view class="title">-->
      <!--                  车辆定金-->
      <!--                </view>-->
      <!--                <view class="text" style="font-size: 24upx; color: #999;">-->
      <!--                  用于车辆租用预订费用，租赁公司会进行联系日租价格，定金也会退还-->
      <!--                </view>-->
      <!--              </view>-->
      <!--              <text class="price">￥{{ zjzxAppointmentFee }}</text>-->
      <!--            </view>-->
      <!--            <view v-else>-->
      <!--              <view class="feiyong">-->
      <!--                <text class="title">基础服务费</text>-->
      <!--                <text class="price">￥{{ zjserviceFees }}</text>-->
      <!--              </view>-->
      <!--              <view class="feiyong">-->
      <!--                <view class="">-->
      <!--                  <view class="title">-->
      <!--                    车辆手续费-->
      <!--                  </view>-->
      <!--                  <view class="text" style="font-size: 24upx; color: #999;">-->
      <!--                    用于车辆清洁、车辆保养、单据制作、人员服务-->
      <!--                  </view>-->
      <!--                </view>-->
      <!--                <text class="price">￥{{ product.fee }}</text>-->
      <!--              </view>-->
      <!--              <view class="feiyong">-->
      <!--                <text class="title">尊享服务费</text>-->
      <!--                <text class="price">￥{{ zjzxServiceFee }}</text>-->
      <!--              </view>-->
      <!--            </view>-->

      <!--          </view>-->
      <!--          <view v-if="!zjzxAppointmentFee">-->
      <!--            <view class="fybox" v-if="product.depositway==1&&yjgettype==1">-->
      <!--              <view class="feiyong">-->
      <!--                <text class="title">租车押金</text>-->
      <!--                <text class="price">￥{{ product.deposit }}</text>-->
      <!--              </view>-->
      <!--              <view class="feiyong">-->
      <!--                <view class="title">-->
      <!--                  违章押金-->
      <!--                </view>-->

      <!--                <text class="price">￥{{ product.violationDeposit }}</text>-->
      <!--              </view>-->
      <!--              <view class="text" style="font-size: 24upx; color: #999;">-->
      <!--                可选线上线下支付押金，用车完成后可退-->
      <!--              </view>-->
      <!--            </view>-->
      <!--          </view>-->


      <!--          <view class="fybox">-->
      <!--            <view class="feiyong">-->
      <!--              <text class="title">全额费用</text>-->
      <!--              <view class="price">-->
      <!--                <view class="redprice">-->
      <!--                  ￥{{ zjprice }}-->
      <!--                </view>-->
      <!--                <view class="">-->
      <!--                  在线支付-->
      <!--                </view>-->
      <!--              </view>-->
      <!--            </view>-->

      <!--          </view>-->
      <!--        </view>-->
      <!--        <button type="primary" class="tobuy flex-x-center flex-y-center" style="padding-left: 10px;padding-right: 10px"-->
      <!--                @click="tobuy">-->
      <!--          去支付-->
      <!--        </button>-->
      <!--      </view>-->
      <view class="popup-content">
        <view class="tabtop">

          <uni-icons type="closeempty" size="20" style="" @tap="$refs.mingxipopup.close()"></uni-icons>
          <view class="tit">
            费用明细
          </view>
        </view>
        <view class="content " style="padding: 0 20upx 40upx 30upx;">
          <!-- 费用明细暂未开发 -->
          <view class="fyitem">
            <view class="title">
              <text>车辆租金</text>
              <text style="margin-left: 30upx;">日均￥{{ product.money }}</text>
            </view>
            <view class="conte">
              <view class="fybox">
                <view class="fy">
                  <text>租车费</text>
                  <text>￥{{ (product.money * timepoint.day).toFixed(2) }}</text>
                </view>
                <text></text>
              </view>
            </view>
          </view>
          <view class="fyitem">
            <view class="title">
              <text>车行手续费</text>
            </view>
            <view class="conte">
              <view class="fybox">
                <view class="fy">
                  <text>车行手续费</text>
                  <text>￥{{ product.fee }}</text>
                </view>
                <text class="text">(含车辆清洁、单据打印等)</text>
              </view>
            </view>
          </view>
          <view class="fyitem">
            <view class="title">
              <text>车行保障服务费</text>
            </view>
            <view class="conte">
              <view class="fybox">
                <view class="fy">
                  <text>基础服务费</text>
                  <text>￥{{ zjserviceFees }}</text>
                </view>
                <view class="fy" v-if="product.pickUpMode==2">
                  <text>送车服务费</text>
                  <text>￥{{ product.sendServiceFee }}</text>
                </view>
                <view class="fy" v-if="product.openZxService==1">
                  <text>尊享服务费</text>
                  <text>￥{{ product.zxServiceFee }}</text>
                </view>
                <text class="text">车辆保障赔付全部损失，含玻璃、不含车轮，车损5000元以下免收折扣费，停运费正常收取</text>
              </view>

            </view>
          </view>
          <view class="fyitem" v-if="product.depositway==1&&yjgettype==1">
            <view class="title">
              <text>车辆押金/违章押金</text>
            </view>
            <view class="conte">

              <view class="fybox">
                <view class="fy">
                  <text>租车押金</text>
                  <view>
                    <text class="price">￥{{ product.deposit }}</text>
                  </view>
                </view>
                <view class="fy">
                  <text>违章押金</text>
                  <view>
                    <text class="price">￥{{ product.violationDeposit }}</text>
                  </view>
                </view>
                <text class="text">线上支付押金，用车完成后可退</text>
              </view>
            </view>
          </view>
          <view class="fyitemdb">
            <view class="ddje">
              订单总额
              <text style="color: red;margin-left: 10upx;">
                <text style="font-size: 24upx;">￥
                </text>
                {{ zjprice }}
              </text>
            </view>
            <view class="text">在线支付</view>
            <view style="height: 80rpx">
              <button class="weixinzhifu" type="primary" @tap="tobuy">去支付
              </button>
            </view>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- <loading v-if="loading"></loading> -->
    <!-- <dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar> -->
    <!-- <popmsg ref="popmsg"></popmsg> -->
  </view>
</template>

<script>

import {getvehiclegoods} from "@/utils/api/stock";
import {addOrder} from "@/utils/api/order";

// var util = require('@/components/WSCoordinate.js')
var app = getApp()
export default {
  data() {
    return {
      file: {
        fileUrl: [],
        fileName: []
      },
      vehicleImage: [],
      vehicleDetailInfo: {},
      zjzxAppointmentFee: 0,// 预约定金
      orderId: undefined,
      carId: -1,
      loading: false,
      product: [],
      business: [],
      bussinessLatLng: '',
      imgurl: '',
      datetimerange: [],
      timepoint: {},//处理后的时间处理数据
      zjprice: 0,//总计金额
      zjserviceFees: 0, //总计基础服务费
      zjzxServiceFee: 0, //总计尊享服务费
      driverobj: {},//驾驶人信息
      baocheitemnum: 0, //包车天数
      // inputvalue: '',
      inputvalue2: null,//送车地址
      current: 0,
      // 单选数据源
      gettypelist: [{
        text: '门店自取',
        value: 1
      }, {
        text: '送车上门',
        value: 2
      }],
      gettype: 1, //取车方式
      checkboxfillednum: 0, //是否开启尊享服务
      yjgettypelist: [{
        text: '线上支付',
        value: 1
      }, {
        text: '线下支付',
        value: 2
      }],
      yjgettype: 1, //押金支付方式
      // inputtype: 'text',
      // inputborder: true,
      // latitude: '',
      // longitude: '',
      // markers:[
      // 	{
      // 		latitude: '',
      // 		longitude: '',
      // 		iconPath:'../../static/imgs/bg.png'
      // 	}
      // ],

    };
  },
  onLoad(opt) {
    // this.opt = app.getopts(opt);
    // this.mendian_id = app.getCache('user_selected_mendianid')
    // this.getdata();
    console.log('product', opt)
    this.carId = opt.id
    this.vehiclegoodsfun(opt.id)
    this.datetimerange = JSON.parse(opt.datetimerange)


    this.datetimerangejsfun()
    // this.onLoadHadnle();
  },
  onShareTimeline(res) {
    let shareObject = {
      title: this.product.name,
      imageUrl: this.imgurl + this.product.pic,
      path: `/pagesA/product/product?id=${this.product.id}&datetimerange=${this.datetimerange}`,
    }

    return shareObject
  },
  onShareAppMessage(res) {
    let shareObject = {
      title: this.product.name,
      imageUrl: this.imgurl + this.product.pic,
      path: `/pagesA/product/product?id=${this.product.id}&datetimerange=${this.datetimerange}`,
    }
    return shareObject
  },
  onShow: function (e) {
    // if (this.product.product_type == 1) {
    // 	uni.$emit('getglassrecord');
    // }
    this.imgurl = app.globalData.imgUrl
    if (this.$store.state.driverobj || uni.getStorageSync('driverobj') && this.$store.state.driverobj.sfcode.length >= 15) {
      this.driverobj = {
        driverName: this.$store.state.driverobj.name,
        driverIdCard: this.$store.state.driverobj.sfcode,
        driverPhone: this.$store.state.driverobj.phone,
        driveid: this.$store.state.driverobj.id
      }
    } else {
      this.driverobj = {
        driverName: '无',
        driverIdCard: '',
        driverPhone: '',
        driveid: ''
      }
      // uni.showModal({
      //   title: '提示',
      //   content: '请添加驾驶员信息',
      //   success: function (res) {
      //     if (res.confirm) {
      //       console.log('用户点击确定');
      //       uni.navigateTo({
      //         url: '/pagesA/jiashiyuanlist/jiashiyuanlist'
      //       })
      //     } else if (res.cancel) {
      //       uni.navigateBack()
      //     }
      //   }
      // });

    }

  },
  onPullDownRefresh: function () {
    // this.getdata();
  },
  onUnload: function () {
    // clearInterval(interval);
    uni.getFileSystemManager().getSavedFileList({
      success: function (res) {
        console.log('getSavedFileInfo', res)
        if (res.fileList.length) {
          uni.getFileSystemManager().removeSavedFile({
            filePath: res.fileList[0].filePath
          })
        }
      }
    })
  },
  // created(e) {
  // 	console.log(e);
  // 	this.vehiclegoodsfun()
  // },
  methods: {
    openInsurance(item) {
      this.previewWechat(this.imgurl + item)
    },
    //微信小程序预览文档,可预览.doc,.docx,.xls,.xlsx,.pdf等文件
    previewWechat(urlPdf) {
      uni.showLoading({
        title: '正在加载中..'
      })
      uni.downloadFile({
        url: urlPdf,
        success: function (res) {
          var filePath = res.tempFilePath;
          uni.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功');
              uni.hideLoading()
            },
          });
        },
        complete: function (r) {
          uni.hideLoading()
        }
      });
    },
    viewVehicleDetail() {
      // let data = JSON.parse(this.product.gpsVinDetail)
      let arr = []
      let params = this.product.merUnitId + '-' + this.product.deptId + '-' + this.product.id
      let url = `/pagesA/product/productDetail?id=${params}`
      // for (const key in data) {
      //   if (data[key] != null && data[key] != '') {
      //     arr.push(`${key}=${data[key]}`)
      //   }
      // }
      // if (arr.length > 0) {
      //   url += '?' + arr.join("&")+`&carNum=${this.product.carnum}`
      // }
      uni.navigateTo({
        url: url
      })
    },
    changePickupTime(pickDate) {
      let startDate = new Date(pickDate)
      let endDate = new Date(this.timepoint.apiobj[1])

      // 计算相差的毫秒数
      const difference = Math.abs(endDate - startDate);
      // 将毫秒数转换为天数
      const daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));
      this.timepoint.time[0] = this.formatDate(startDate)
      this.timepoint.day = daysDifference
      this.timepoint.apiobj[0] = pickDate
      startDate.setDate(startDate.getDate() + 1)
      this.timepoint.startDate = startDate.Format("yyyy-MM-dd")
      this.amountStatistics()
      // console.log(pickDate)

    },
    changeCollectionTime(collectionDate) {
      let endDate = new Date(collectionDate)
      let startDate = new Date(this.timepoint.apiobj[0])
      // 计算相差的毫秒数
      const difference = Math.abs(endDate - startDate);
      // 将毫秒数转换为天数
      const daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));
      this.timepoint.time[1] = this.formatDate(endDate)
      this.timepoint.day = daysDifference
      this.timepoint.apiobj[1] = collectionDate
      endDate.setDate(endDate.getDate() - 1)
      this.timepoint.endTime = endDate.Format("yyyy-MM-dd")
      this.amountStatistics()
    },
    disabledPickupDate(time) {
      return time > new Date(this.timepoint.apiobj[1])
    },
    disabledCollectionDate(time) {
      return time < new Date(this.timepoint.apiobj[0])
    },

    vehiclegoodsfun(opt) {
      getvehiclegoods(opt).then(data => {
        // console.log(data.data.data);
        this.product = data.data.data
        if (this.product.gpsVinDetail) {
          this.vehicleDetailInfo = JSON.parse(this.product.gpsVinDetail)
          console.log('vehicleDetailInfo', this.vehicleDetailInfo)
        }


        if (this.product.vehpics) {
          this.vehicleImage = this.product.vehpics.split(',')
        }

        if (this.product.vehInsurancePic) {
          this.file.fileUrl = this.product.vehInsurancePic.split(',')
        }

        if (this.product.vehInsuranceName) {
          this.file.fileName = this.product.vehInsuranceName.split(',')
        }

        this.business = data.data.data.shopAddress
        this.bussinessLatLng = `${data.data.data.shopLat},${data.data.data.shopLng}`
        console.log(this.bussinessLatLng)

        this.zjserviceFees = this.product
            .serviceFee * this.timepoint.day

        this.amountStatistics()

        uni.setNavigationBarTitle({
          title: this.product.name
        });

        // this.gettypelist = this.business.ranges == 0 ? [{
        //   text: '门店自取',
        //   value: 1
        // }] : [{
        //   text: '门店自取',
        //   value: 1
        // }, {
        //   text: '送车上门',
        //   value: 2
        // }]
      })
    },
    tobuy() {
      let useinfo = uni.getStorageSync('useinfo')
      console.log(useinfo)
      let obj = {
        merUnitId: this.product.merUnitId,
        sid: this.product.id,
        deptId: this.product.deptId,
        openId: useinfo.openid,
        cid: this.product.id,
        stockId: this.product.id,
        orderType: 0,
        money: this.product.money,
        totalMoney: this.zjprice,
        prepayMoney: this.zjprice,
        //carNum: this.product.carnum,
        vehicleDisting: this.product.vehicleDisting,       //TODO 外调车辆类型
        externalFare: this.product.externalFare,
        pickUpMode: this.gettype,
        startTime: this.timepoint.apiobj[0],
        endTime: this.timepoint.apiobj[1],
        // startShop: this.business.id,
        // endShop: this.business.id,
        // shopName: this.business.name,
        // endShopName: this.business.name,
        day: this.timepoint.day,
        wid: useinfo.id,
        fee: this.product.fee,
        serviceFee: this.zjserviceFees,
        zxServiceFee: this.zjzxServiceFee,
        openZxService: this.checkboxfillednum,
        appointmentFee: this.zjzxAppointmentFee,
        utelphone: uni.getStorageSync('useinfo').userTel,
        //username: uni.getStorageSync('useinfo').userName,
        type: this.timepoint.day >= 70 ? 2 : 1,
        carName: this.product.name,
        pickUpAddress: this.inputvalue2 ? this.inputvalue2[0] : this
            .business,
        pickUpLatLng: this.inputvalue2 ? `${this.inputvalue2[1]},${this.inputvalue2[2]}` : this.bussinessLatLng,
        // returnAddress: this.inputvalue2 ? JSON.stringify(this.inputvalue2) : this
        //     .inputvalue2,
        depositWay: this.product.depositway,
        payType: this.yjgettype,
        // depositway=》是否支持面押：0免压，1不支持免压，yjgettype=》1:线上支付，2:线下支付
        depositMoney: this.product
            .deposit,
        violationDeposit: this.product.violationDeposit

      }
      // 当前驾驶人信息合并obj下单对象里面
      obj = Object.assign(this.driverobj, obj)
      uni.showToast({
        title: '正在提交支付',
        icon: 'loading',
        success() {
        }
      })
      addOrder(obj).then(res => {
        switch (res.data.code) {
          case 500:
          case 666:
          case 777:
            uni.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 3000,
              complete: () => {
                setTimeout(() => {
                  uni.navigateBack({
                    delta: 1, success: () => {
                      const pages = getCurrentPages(); //获取当前页面栈
                      const prevPage = pages[pages.length - 1]; //获取上一个页面实例对象
                      //prevPage.$vm.initList(); //调用上一个页面的onLoad方法
                    }
                  })
                }, 2000)
              }
            })
            break
          case 601:
            let orderId = res.data.data
            console.log('alert', orderId)
            app.alert(res.data.msg, () => {
              uni.navigateTo({
                url: '/pagesB/orderdetails/orderdetails?orderNum=' +
                    orderId
              })
            })
            this.loading = false
            break
          case 200:
            // obj.openid = useinfo.openid
            // that.orderId = res.data.data.id
            uni.requestPayment({
              appId: res.data.data.appid,
              timeStamp: res.data.data.timeStamp, // 时间戳（单位：秒）
              nonceStr: res.data.data.nonceStr, // 随机字符串
              signType: res.data.data.signType,
              package: res.data.data.package,
              paySign: res.data.data.paySign,
              success: () => {
                uni.showLoading('支付中')
                setTimeout(() => {
                  uni.showToast({
                    title: '支付成功',
                    icon: 'success',
                    success() {
                      uni.navigateTo({
                        url: '/pagesB/orderdetails/orderdetails?orderNum=' +
                            res.data.data.orderNum
                      })
                    }
                  })
                }, 2000)

              },
              fail: () => {
                console.log('orderdetail', res.data.data.orderNum)
                uni.navigateTo({
                  url: '/pagesB/orderdetails/orderdetails?orderNum=' +
                      res.data.data.orderNum
                })
              }
            })
            // // 获取支付签名
            // postordervehorder(obj).then(zhifu => {
            //   that.orderId = res.data.data.id
            //   uni.requestPayment({
            //     appId: zhifu.data.data.appid,
            //     timeStamp: zhifu.data.data.timeStamp, // 时间戳（单位：秒）
            //     nonceStr: zhifu.data.data.nonceStr, // 随机字符串
            //     signType: zhifu.data.data.signType,
            //     package: zhifu.data.data.package,
            //     paySign: zhifu.data.data.paySign,
            //     success: () => {
            //       uni.showToast({
            //         title: '支付成功',
            //         icon: 'success',
            //         success() {
            //           uni.navigateTo({
            //             url: '/pagesB/orderdetails/orderdetails?orderId=' +
            //                 that.orderId
            //           })
            //         }
            //       })
            //     },
            //     fail: () => {
            //       console.log('orderdetail', that.orderId)
            //       uni.navigateTo({
            //         url: '/pagesB/orderdetails/orderdetails?orderId=' +
            //             that.orderId
            //       })
            //     }
            //   })
            // })

        }
      })
    },
    numberStep(value) {
      this.baochefuwu(value)
    },
    baochefuwu(nums) {
      this.baocheitemnum = nums
      // 解析第一个日期，因为它不会改变
      let updatedDates = [this.datetimerange[0]];

      // 获取第一个日期的时间对象
      let firstDate = new Date(this.datetimerange[0]);

      // 从第二个日期开始，更新数组中的每个日期
      for (let i = 1; i < this.datetimerange.length; i++) {
        // 创建一个新日期对象，用于修改日期
        let newDate = new Date(firstDate);
        // 将日期向前推进指定的天数
        newDate.setDate(newDate.getDate() + nums * i);
        // 将新日期转换为ISO字符串并添加到结果数组中
        updatedDates.push(newDate.toISOString());

      }
      this.datetimerange = updatedDates
      this.datetimerangejsfun()
      this.amountStatistics()

    }
    ,
    datetimerangejsfun() {
      console.log(this.datetimerange)
      // 定义包含两个日期的数组
      const dates = [
        new Date(this.datetimerange[0]),
        new Date(this.datetimerange[1])
      ];

      // 计算相差的毫秒数
      const difference = Math.abs(dates[1] - dates[0]);

      // 将毫秒数转换为天数
      const daysDifference = Math.ceil(difference / (1000 * 60 * 60 * 24));

      console.log(daysDifference); // 输出相差的天数

      // 定义最终的格式化时间数组
      const formattedTimestamps = [];

      // 遍历时间戳数组
      this.datetimerange.forEach(timestamp => {
        // 将UTC时间戳转换为本地时间（例如，亚洲/上海时区）
        const localTime = new Date(timestamp);
        //转换显示格式
        formattedTimestamps.push(this.formatDate(localTime));
      });

      console.log(formattedTimestamps); // ['04月07日 今天 11:29:23', '04月09日 星期二 11:29:23']


      const datesapiobjs = this.datetimerange.map(date => {
        const formattedDate = new Date(date);
        const day = formattedDate.getDate();
        const month = formattedDate.getMonth() + 1;
        const hours = formattedDate.getHours();
        const minutes = formattedDate.getMinutes();
        return `${formattedDate.getFullYear()}-${month}-${day} ${hours}:${minutes < 10 ? '0' + minutes : minutes}`;
      });

      let startTime = new Date()
      startTime.setDate(startTime.getDate() + 1)
      let endTime = new Date()
      endTime.setDate(endTime.getDate() - 1)

      this.timepoint = {
        day: daysDifference,
        time: formattedTimestamps,
        apiobj: datesapiobjs,
        startTime: startTime.Format("yyyy-MM-dd"),
        endTime: endTime.Format("yyyy-MM-dd")
      }
    },
    formatDate(localTime) {
      //localTime.setHours(localTime.getHours()); // 假设上海时区为UTC+8

      // 格式化日期
      const monthDay = ("0" + (localTime.getMonth() + 1)).slice(-2) + "-" + ("0" + localTime
          .getDate()).slice(-2) + "日";

      // 获取并格式化星期
      const weekDays = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
      const weekDay = weekDays[localTime.getDay()];

      // 特定情况下将星期替换为"今天"
      const today = new Date();
      const isToday = localTime.getDate() === today.getDate() && localTime.getMonth() === today
          .getMonth() && localTime.getFullYear() === today.getFullYear();
      const dayLabel = isToday ? "今天" : weekDay;

      // 提取小时和分钟
      const hours = ("0" + localTime.getHours()).slice(-2);
      const minutes = ("0" + localTime.getMinutes()).slice(-2);

      // 组合时间部分
      const time = `${hours}:${minutes}`;

      // 组合最终的格式化字符串
      const formattedTime = `${monthDay} ${dayLabel} ${time}`;
      return formattedTime
    },
    gojiashiyuanlist() {
      uni.navigateTo({
        url: '/pagesA/jiashiyuanlist/jiashiyuanlist'
      })
    },
    // addressfun(text) {
    // 	let startIndex = text.indexOf("区") + 1;
    // 	return text.slice(startIndex);
    // },
    swiperChange: function (e) {
      var that = this;
      that.current = e.detail.current
    },

    amountStatistics() {
      // let peisongfei = this.gettype == 2 ? Number(this.product
      // 	.sendServiceFee) + Number(this.product
      // 	.pickServiceFee) : 0

      this.zjserviceFees = this.product
          .serviceFee * this.timepoint.day
      this.zjzxServiceFee = this.checkboxfillednum == 1 ? this.product
          .zxServiceFee * this.timepoint.day : 0
      // 定金
      this.zjzxAppointmentFee = this.product.openAppointment ? this.product.appointmentFee : 0
      // depositway=》是否支持面押：0免压，1不支持免压，yjgettype=》1:线上支付，2:线下支付
      //this.product.violationDeposit
      // if (this.zjzxAppointmentFee > 0) {
      //   this.zjprice = this.zjzxAppointmentFee
      // } else

      if (this.yjgettype == 2) {
        this.zjprice = (this.product.money * this
            .timepoint.day + this.product
            .fee + this
            .zjserviceFees + this.zjzxServiceFee).toFixed(2)
      } else {
        this.zjprice = this.product.depositway == 0 ? (this.product.money *
            this
                .timepoint.day + this.product.fee + this
                .zjserviceFees + this.zjzxServiceFee).toFixed(2) : (this.product.money *
            this
                .timepoint.day + this.product.fee + this
                .zjserviceFees + this.zjzxServiceFee + this.product
                .deposit + this.product.violationDeposit + this.zjzxAppointmentFee).toFixed(2)
      }
      if (this.gettype == 2) {
        this.zjprice = (Number(this.zjprice) + this.product.sendServiceFee).toFixed(2)
      }
      return this.zjprice
    }
    ,
    checkboxfun(e) {
      let waht = this
      console.log(e.detail.value);
      if (e.detail.value == 2) {
        app.confirm('选择送车地址', () => {
          uni.chooseLocation({
            success: res => {
              console.log(res);

              waht.inputvalue2 = [res.address, res.latitude, res.longitude];
              console.log(waht.inputvalue2);
              //计算总金额
              this.amountStatistics()
            },
            fail(res) {
              console.log(res);
              waht.gettype = 1
              waht.inputvalue2 = null
              app.toastnone('已取消送车上门')
              // console.log(waht.gettype);
            }
          });
        }, () => {
          this.gettype = 1
        })
      } else {
        this.inputvalue2 = null;
        this.amountStatistics()
      }
    }
    ,
    checkboxfun2(e) {
      this.yjgettype = e.detail.value
      // let peisongfei = this.gettype == 2 ? Number(this.product.sendServiceFee) + Number(this.product
      // 	.pickServiceFee) : 0

      this.amountStatistics()

    }
    ,
    checkboxfilledfun() {
      // let peisongfei = this.gettype == 2 ? Number(this.product.sendServiceFee) + Number(this.product
      // 	.pickServiceFee) : 0
      this.checkboxfillednum = this.checkboxfillednum == 0 ? 1 : 0
      this.amountStatistics()
    }
    ,
    // previewImagefun(index, imglist) {
    // 	getApp().previewImage(index, imglist)
    // },
    flitertext(idNumber, x, y) {
      if (idNumber) {
        const idArray = idNumber.split('');

        // 遍历需要隐藏的范围，将其中的数字替换为 *
        for (let i = x; i < idArray.length - y; i++) {
          idArray[i] = '*';
        }
        console.log(idArray);
        // 将数组重新拼接成字符串，并返回
        return idArray.join('');
      }
    }
    ,

  }

};
</script>
<style scoped>
page {
  position: relative;
  width: 100%;
  height: 100%;
}

.container {
  height: 100%
}

.follow_topbar {
  height: 88rpx;
  width: 100%;
  max-width: 640px;
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
  top: 0;
  z-index: 13;
}

.follow_topbar .headimg {
  height: 64rpx;
  width: 64rpx;
  margin: 6px;
  float: left;
}

.follow_topbar .headimg image {
  height: 64rpx;
  width: 64rpx;
}

.follow_topbar .info {
  height: 56rpx;
  padding: 16rpx 0;
}

.follow_topbar .info .i {
  height: 28rpx;
  line-height: 28rpx;
  color: #ccc;
  font-size: 24rpx;
}

.follow_topbar .info {
  height: 80rpx;
  float: left;
}

.follow_topbar .sub {
  height: 48rpx;
  width: auto;
  background: #FC4343;
  padding: 0 20rpx;
  margin: 20rpx 16rpx 20rpx 0;
  float: right;
  font-size: 24rpx;
  color: #fff;
  line-height: 52rpx;
  border-radius: 6rpx;
}

.qrcodebox {
  background: #fff;
  padding: 50rpx;
  position: relative;
  border-radius: 20rpx
}

.qrcodebox .img {
  width: 400rpx;
  height: 400rpx
}

.qrcodebox .txt {
  color: #666;
  margin-top: 20rpx;
  font-size: 26rpx;
  text-align: center
}

.qrcodebox .close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 8rpx
}

.swiper-container {
  position: relative;
  height: 450rpx;
  overflow: hidden;
}

.swiper-container .cankaoyangtu {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 10%;
  left: 0;
  background-color: transparent;
  color: #fff;
  font-size: 24upx;
  padding: 0 30upx;
}

.swiper {
  width: 100%;
  height: 450rpx;
  overflow: hidden;
}

.swiper-item-view {
  width: 100%;
  height: 450rpx;
}

.swiper .img {
  width: 100%;
  height: 450rpx;
  overflow: hidden;
}

.imageCount {
  width: 100rpx;
  height: 50rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 40rpx;
  line-height: 50rpx;
  color: #fff;
  text-align: center;
  font-size: 26rpx;
  position: absolute;
  right: 13px;
  bottom: 20rpx;
}

.provideo {
  background: rgba(255, 255, 255, 0.7);
  width: 160rpx;
  height: 54rpx;
  padding: 0 20rpx 0 4rpx;
  border-radius: 27rpx;
  position: absolute;
  bottom: 30rpx;
  left: 50%;
  margin-left: -80rpx;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.provideo image {
  width: 50rpx;
  height: 50rpx;
}

.provideo .txt {
  flex: 1;
  text-align: center;
  padding-left: 10rpx;
  font-size: 24rpx;
  color: #333
}

.videobox {
  width: 100%;
  height: 650rpx;
  text-align: center;
  background: #000
}

.videobox .video {
  width: 100%;
  height: 650rpx;
}

.videobox .parsevideo {
  margin: 0 auto;
  margin-top: 20rpx;
  height: 40rpx;
  line-height: 40rpx;
  color: #333;
  background: #ccc;
  width: 140rpx;
  border-radius: 25rpx;
  font-size: 24rpx
}

.header {
  width: 100%;
  padding: 10rpx 3%;
  background: #fff;
  margin-top: -30rpx;
  border-top-left-radius: 30upx;
  border-top-right-radius: 30upx;
  overflow: hidden;
  position: relative;
  /* padding-top: 10upx; */
}

.header .price_share {
  width: 100%;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 4rpx solid #eee;
  margin-bottom: 20upx;
  /* padding-bottom: 20upx; */

}

.header .price_share .price {
  display: flex;
  align-items: flex-end
}

.header .price_share .price .f1 {
  font-size: 50rpx;
  color: #51B539;
  font-weight: bold
}

.header .price_share .price .f2 {
  font-size: 26rpx;
  color: #C2C2C2;
  text-decoration: line-through;
  margin-left: 30rpx;
  padding-bottom: 5px
}

.header .price_share .share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 60rpx;
}

.header .price_share .share .img {
  width: 32rpx;
  height: 32rpx;
  margin-bottom: 2px
}

.header .price_share .share .txt {
  color: #333333;
  font-size: 22rpx
}

.header .title {
  color: #000000;
  font-weight: bold;
  font-size: 32rpx;
}

.header .price_share .title {
  display: flex;
  align-items: flex-end;
}

.header .price_share .xinhao {
  margin-top: 10upx;
  display: flex;
  font-size: 26upx;
}

.header .price_share .xinhao text {
  color: #999;
}

.header .sellpoint {
  font-size: 28rpx;
  color: #666;
  padding-top: 20rpx;
}

.header .sales_stock {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  line-height: 60rpx;
  margin-top: 30rpx;
  font-size: 24rpx;
  color: #777777
}

.header .commission {
  display: inline-block;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 20rpx;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 20rpx
}

.header .upsavemoney {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  font-size: 28rpx;
  height: 70rpx;
  padding: 0 20rpx
}

.choose {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 3%;
  color: #333;
}

.choose .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.choose .f2 {
  width: 32rpx;
  height: 32rpx;
}

.cuxiaodiv {
  background: #fff;
  margin-top: 20rpx;
  padding: 0 3%;
}

.fuwupoint {
  width: 100%;
  font-size: 24rpx;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  padding: 12rpx 0;
  display: flex;
  align-items: center
}

.fuwupoint .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 30rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.fuwupoint .f1 {
  margin-right: 20rpx;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden
}

.fuwupoint .f1 .t {
  padding: 4rpx 20rpx 4rpx 0;
  color: #777;
  flex-shrink: 0
}

.fuwupoint .f1 .t:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -4rpx;
  margin-right: 10rpx;
  width: 24rpx;
  height: 24rpx;
  background: url('') no-repeat;
  background-size: 24rpx auto;
}

.fuwupoint .f2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
}

.fuwupoint .f2 .img {
  width: 32rpx;
  height: 32rpx;
}

.fuwudialog-content {
  font-size: 24rpx
}

.fuwudialog-content .f1 {
  color: #333;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold
}

.fuwudialog-content .f1:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-top: -4rpx;
  margin-right: 10rpx;
  width: 24rpx;
  height: 24rpx;
  background: url('') no-repeat;
  background-size: 24rpx auto;
}

.fuwudialog-content .f2 {
  color: #777
}

.cuxiaopoint {
  width: 100%;
  font-size: 24rpx;
  color: #333;
  height: 88rpx;
  line-height: 88rpx;
  padding: 12rpx 0;
  display: flex;
  align-items: center
}

.cuxiaopoint .f0 {
  color: #555;
  font-weight: bold;
  height: 32rpx;
  font-size: 24rpx;
  padding-right: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center
}

.cuxiaopoint .f1 {
  margin-right: 20rpx;
  flex: 1;
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden
}

.cuxiaopoint .f1 .t {
  margin-left: 10rpx;
  border-radius: 3px;
  font-size: 24rpx;
  height: 40rpx;
  line-height: 40rpx;
  padding-right: 10rpx;
  flex-shrink: 0;
  overflow: hidden
}

.cuxiaopoint .f1 .t0 {
  display: inline-block;
  padding: 0 5px;
}

.cuxiaopoint .f1 .t1 {
  padding: 0 4px
}

.cuxiaopoint .f2 {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  width: 32rpx;
  height: 32rpx;
}

.cuxiaopoint .f2 .img {
  width: 32rpx;
  height: 32rpx;
}

.cuxiaodiv .cuxiaoitem {
  border-bottom: 1px solid #E6E6E6;
}

.cuxiaodiv .cuxiaoitem:last-child {
  border-bottom: 0
}

.popup__container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  background: #fff
}

.popup__overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  opacity: 0.3;
  background: #000
}

.popup__modal {
  width: 100%;
  position: absolute;
  bottom: 0;
  color: #3d4145;
  overflow-x: hidden;
  overflow-y: hidden;
  opacity: 1;
  padding-bottom: 20rpx;
  background: #fff;
  border-radius: 20rpx 20rpx 0 0;
  z-index: 12;
  min-height: 600rpx;
  max-height: 1000rpx;
}

.popup__title {
  text-align: center;
  padding: 30rpx;
  position: relative;
  position: relative
}

.popup__title-text {
  font-size: 32rpx
}

.popup__close {
  position: absolute;
  top: 34rpx;
  right: 34rpx
}

.popup__content {
  width: 100%;
  max-height: 880rpx;
  overflow-y: scroll;
  padding: 20rpx 0;
}

.service-item {
  display: flex;
  padding: 0 40rpx 20rpx 40rpx;
}

.service-item .prefix {
  padding-top: 2px;
}

.service-item .suffix {
  padding-left: 10rpx;
}

.service-item .suffix .type-name {
  font-size: 28rpx;
  color: #49aa34;
  margin-bottom: 10rpx;
}


.shop {
  display: flex;
  align-items: center;
  width: 100%;
  background: #fff;
  margin-top: 20rpx;
  padding: 20rpx 3%;
  position: relative;
  min-height: 100rpx;
}

.shop .p1 {
  width: 90rpx;
  height: 90rpx;
  border-radius: 6rpx;
  flex-shrink: 0
}

.shop .p2 {
  padding-left: 10rpx
}

.shop .p2 .t1 {
  width: 100%;
  height: 40rpx;
  line-height: 40rpx;
  overflow: hidden;
  color: #111;
  font-weight: bold;
  font-size: 30rpx;
}

.shop .p2 .t2 {
  width: 100%;
  height: 30rpx;
  line-height: 30rpx;
  overflow: hidden;
  color: #999;
  font-size: 24rpx;
  margin-top: 8rpx
}

.shop .p4 {
  height: 64rpx;
  line-height: 64rpx;
  color: #FFFFFF;
  border-radius: 32rpx;
  margin-left: 20rpx;
  flex-shrink: 0;
  padding: 0 30rpx;
  font-size: 24rpx;
  font-weight: bold
}

.detail {
  min-height: 200rpx;
}

.detail_title {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20rpx;
  margin-bottom: 30rpx
}

.detail_title .t0 {
  font-size: 34rpx;
  font-weight: bold;
  color: #222222;
  margin: 0 20rpx
}

.detail_title .t1 {
  width: 12rpx;
  height: 12rpx;
  background: rgba(253, 74, 70, 0.2);
  transform: rotate(45deg);
  margin: 0 4rpx;
  margin-top: 6rpx
}

.detail_title .t2 {
  width: 18rpx;
  height: 18rpx;
  background: rgba(253, 74, 70, 0.4);
  transform: rotate(45deg);
  margin: 0 4rpx
}

.commentbox {
  width: 100%;
  background: #fff;
  padding: 0 3%;
  margin-top: 20rpx
}

.commentbox .title {
  height: 90rpx;
  line-height: 90rpx;
  border-bottom: 1px solid #DDDDDD;
  display: flex
}

.commentbox .title .f1 {
  flex: 1;
  color: #111111;
  font-weight: bold;
  font-size: 30rpx
}

.commentbox .title .f2 {
  color: #333;
  font-weight: bold;
  font-size: 28rpx;
  display: flex;
  align-items: center
}

.commentbox .nocomment {
  height: 100rpx;
  line-height: 100rpx
}

.comment {
  display: flex;
  flex-direction: column;
  min-height: 200rpx;
}

.comment .item {
  background-color: #fff;
  padding: 10rpx 20rpx;
  display: flex;
  flex-direction: column;
}

.comment .item .f1 {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 10rpx 0;
}

.comment .item .f1 .t1 {
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
}

.comment .item .f1 .t2 {
  padding-left: 10rpx;
  color: #333;
  font-weight: bold;
  font-size: 30rpx;
}

.comment .item .f1 .t3 {
  text-align: right;
}

.comment .item .f1 .t3 .img {
  width: 24rpx;
  height: 24rpx;
  margin-left: 10rpx
}

.comment .item .score {
  font-size: 24rpx;
  color: #f99716;
}

.comment .item .score image {
  width: 140rpx;
  height: 50rpx;
  vertical-align: middle;
  margin-bottom: 6rpx;
  margin-right: 6rpx;
}

.comment .item .f2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 10rpx 0;
}

.comment .item .f2 .t1 {
  color: #333;
  font-size: 28rpx;
}

.comment .item .f2 .t2 {
  display: flex;
  width: 100%
}

.comment .item .f2 .t2 image {
  width: 100rpx;
  height: 100rpx;
  margin: 10rpx;
}

.comment .item .f2 .t3 {
  color: #aaa;
  font-size: 24rpx;
}

.comment .item .f3 {
  margin: 20rpx auto;
  padding: 0 30rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: 1px solid #E6E6E6;
  border-radius: 30rpx;
  color: #111111;
  font-weight: bold;
  font-size: 26rpx
}

.bottombar {
  width: 94%;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: #fff;
  display: flex;
  height: 100rpx;
  padding: 10upx 4% 10upx 2%;
  align-items: center;
  box-sizing: content-box;
  box-shadow: 0 -2px 4px rgba(50, 50, 50, 0.3);
  /* 上边框阴影 */
}

.bottombar .zxzfprice {
  width: 70%;


  display: flex;
  flex-direction: column;
  /* align-items: center;s */
}

.bottombar .zxzfprice .top {
  display: flex;
  /* flex-direction: column; */
  align-items: center;
}

.bottombar .f1 {
  flex: 1;
  display: flex;
  align-items: center;
  margin-right: 30rpx
}

.bottombar .f1 .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80rpx;
  position: relative
}

.bottombar .f1 .item .img {
  width: 44rpx;
  height: 44rpx
}

.bottombar .f1 .item .t1 {
  font-size: 18rpx;
  color: #222222;
  height: 30rpx;
  line-height: 30rpx;
  margin-top: 6rpx
}

.bottombar .op {
  width: 60%;
  border-radius: 36rpx;
  overflow: hidden;
  display: flex;
}

.bottombar .tocart {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  color: #fff;
  border-radius: 0px;
  border: none;
  font-size: 28rpx;
  font-weight: bold
}

.bottombar .tobuy {
  flex: 1;
  height: 72rpx;
  line-height: 72rpx;
  color: #fff;
  border-radius: 0px;
  border: none;
  font-size: 28rpx;
  font-weight: bold
}

.bottombar .cartnum {
  position: absolute;
  right: 4rpx;
  top: -4rpx;
  color: #fff;
  border-radius: 50%;
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 22rpx;
}

.bottombar .op2 {
  width: 60%;
  overflow: hidden;
  display: flex;
}

.bottombar .tocart2 {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  color: #fff;
  background: #fa938a;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 10rpx;
}

.bottombar .tobuy2 {
  flex: 1;
  height: 80rpx;
  border-radius: 10rpx;
  color: #fff;
  background: #df2e24;
  font-size: 28rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center
}

.paramitem {
  display: flex;
  border-bottom: 1px solid #f5f5f5;
  padding: 20rpx
}

.paramitem .f1 {
  width: 30%;
  color: #666
}

.paramitem .f2 {
  color: #333
}

.paramitem:last-child {
  border-bottom: 0
}

.xihuan {
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20rpx 160rpx;
  margin-top: 20rpx
}

.xihuan-line {
  height: auto;
  padding: 0;
  overflow: hidden;
  flex: 1;
  height: 0;
  border-top: 1px solid #eee
}

.xihuan-text {
  padding: 0 32rpx;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center
}

.xihuan-text .txt {
  color: #111;
  font-size: 30rpx
}

.xihuan-text .img {
  text-align: center;
  width: 36rpx;
  height: 36rpx;
  margin-right: 12rpx
}

.prolist {
  width: 100%;
  height: auto;
  padding: 8rpx 20rpx;
}

.toptabbar_tab {
  display: flex;
  width: 100%;
  height: 90rpx;
  background: #fff;
  top: var(--window-top);
  z-index: 11;
  position: fixed;
  border-bottom: 1px solid #f3f3f3
}

.toptabbar_tab .item {
  flex: 1;
  font-size: 28rpx;
  text-align: center;
  color: #666;
  height: 90rpx;
  line-height: 90rpx;
  overflow: hidden;
  position: relative
}

.toptabbar_tab .item .after {
  display: none;
  position: absolute;
  left: 50%;
  margin-left: -16rpx;
  bottom: 10rpx;
  height: 3px;
  border-radius: 1.5px;
  width: 32rpx
}

.toptabbar_tab .on {
  color: #323233;
}

.toptabbar_tab .on .after {
  display: block
}

.scrolltop {
  position: fixed;
  bottom: 160rpx;
  right: 20rpx;
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border-radius: 50%;
  padding: 12rpx 10rpx 8rpx 10rpx;
  z-index: 9;
}

.scrolltop .image {
  width: 100%;
  height: 100%;
}

.ggdiaplog_close {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  bottom: -100rpx;
  left: 50%;
  margin-left: -25rpx;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  padding: 8rpx
}

.schemeDialog {
  background: rgba(0, 0, 0, 0.4);
  z-index: 12;
}

.schemeDialog .main {
  position: absolute;
  top: 30%
}

.schemecon {
  padding: 40rpx 30rpx;
}

.copybtn {
  text-align: center;
  margin-top: 30rpx;
  padding: 15rpx 20rpx;
  border-radius: 50rpx;
  color: #fff
}

.member {
  position: relative;
  border-radius: 8rpx;
  border: 1rpx solid #fd4a46;
  overflow: hidden;
  box-sizing: content-box;
}

.member_lable {
  height: 100%;
  font-size: 22rpx;
  color: #fff;
  background: #fd4a46;
  padding: 0 15rpx;
}

.member_value {
  padding: 0 15rpx;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd4a46;
}

.flex-s {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.moneyprice {
  font-size: 26rpx;
  font-weight: 400;
  padding: 4rpx 10rpx;
  min-width: 90rpx;
  text-align: center;
  margin-left: 10rpx;
  border-radius: 20rpx;
}

/*附近门店S*/
.nearby-mendian-box {
  margin: 20rpx 0;
  background: #FFFFFF;
  width: 100%;
  padding: 20rpx;
}

.nearby-mendian-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nearby-mendian-title .t1 {
  font-size: 30rpx;
  font-weight: bold;
}

.nearby-mendian-title .t2 {
  color: #999;
  font-size: 26rpx;
}

.nearby-mendian-title .t2 image {
  height: 26rpx;
  width: 26rpx;
  vertical-align: middle;
}

.nearby-mendian-info {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 20rpx;
}

.mendian-info .b1 {
  background-color: #fbfbfb;
}

.nearby-mendian-info .b1 image {
  height: 90rpx;
  width: 90rpx;
  border-radius: 6rpx;
  border: 1px solid #e8e8e8;
}

.nearby-mendian-info .b2 {
  flex: 1;
  line-height: 38rpx;
  margin-left: 10rpx;
  max-width: 70%;
  overflow: hidden;
}

.nearby-mendian-info .b2 .t1 {
  padding-bottom: 10rpx;
}

.nearby-mendian-info .b2 .t2 {
  font-size: 24rpx;
  color: #999;
}

.nearby-mendian-info .b3 {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  padding-left: 10rpx;
  width: 130rpx;
}

.nearby-mendian-info .b3 image {
  width: 40rpx;
  height: 40rpx;
  margin-right: 16rpx;
}

.nearby-mendian-info .nearby-tag {
  padding: 0 10rpx;
  margin-right: 10rpx;
  display: inline-block;
  font-size: 22rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.nearby-mendian-info .mendian-distance {
  flex-shrink: 0;
  margin-right: 10rpx;
}

.nearby-mendian-info .mendian-address {
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 80%;
}

.pd10 {
  padding-left: 10rpx;
}

/*附近门店E*/
</style>
<style lang="less">
.quchecailiao,
.yajinbox,
.jiashiyuanbox,
.cheliangmiaoshu,
.baochefuwu,
.cheliangbaozhang {
  font-size: 26rpx;
  padding: 25rpx 3% 20rpx;
  padding-bottom: 40upx;
  background-color: #fff;
  margin-top: 25upx;

}

.cheliangmiaoshu {
  .detail {
    .img {
      width: 100%;

      image {
        width: 100%;
      }
    }
  }
}

.shijianaddres {
  // display: flex;
  // align-items: center;
  // justify-content: space-between;
  font-size: 30rpx;
  position: relative;

  .sjcent {
    text-align: center;
    line-height: 15upx;
    font-size: 24upx;
    margin: 20upx 0;
    color: #007aff;

    image {
      width: 70upx;
      height: 10upx;
    }
  }

  .float-right-day {
    position: absolute;
    right: 30upx;
    top: 35upx;

  }

  .sjright {
    margin-top: 30upx;
  }

  .addres {
    color: black;
    line-height: 50rpx;
    // width: 100%;
    // white-space: pre-wrap;
    // overflow: hidden;
    // font-size: 26upx;
    // height: 40upx;
  }

  .tit {
    color: #999;
    margin-right: 20upx;
  }

  .shijian {
    font-weight: 700;
    margin: 5upx 0;
  }

}

.baochefuwu {
  .baoche {
    font-size: 34upx;
    margin-top: 10upx;
    display: flex;
    justify-content: space-evenly;


    .baocheitem {
      background-color: #eee;
      border-radius: 20upx;
      padding: 15upx 30upx;
      //width:calc((100vw-10vw)/4);
    }

    .baocheitem-active {
      background-color: #007aff;
      color: #fff;
    }
  }
}

.jiashiyuanbox {

  .jiashiyuanxinxi {
    position: relative;

    .jiashiyuanitem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15upx 0;
      font-size: 34upx;

      .fl {
        .tit {
          color: #999;
          margin-bottom: 12upx;
        }

        .info {
          color: black
        }

        .name {
          font-weight: 700;
        }
      }

    }
  }
}

.cheliangbaozhang {
  .cheliangbaozhangbox {

    .jichufuwu,
    .zunxingfuwu {
      margin: 20upx 0;
      position: relative;

      .dingwei {
        position: absolute;
        top: -20%;
        left: 0;
        background-color: rgb(229, 243, 255);
        padding: 20upx 30upx;
        width: calc(100% + 7%);
        /* 子盒子宽度为 100% + 父盒子的左右 padding */
        margin: 0 -26upx;
        /* 使用负 margin 抵消父盒子的 padding */
        color: rgb(12, 132, 224);

        &::after {
          content: "";
          position: absolute;
          bottom: -10px;
          /* 与底部对齐 */
          left: 50%;
          /* 水平居中 */
          transform: translateX(-50%);
          /* 水平居中 */
          width: 0;
          height: 0;
          border-left: 10px solid transparent;
          /* 左边框透明 */
          border-right: 10px solid transparent;
          /* 右边框透明 */
          border-top: 10px solid rgb(229, 243, 255);
          /* 顶部边框为实心，可以根据需要修改颜色 */
        }
      }

      .left {
        flex: 1;

        .title {
          font-weight: 700;
          margin-bottom: 20upx;
          font-size: 30upx;
        }

        .xieyi {
          .text {
            margin: 13upx 0;
          }

          .chehangtigong {
            border: 1upx solid #ccc;
            padding: 5upx;
            width: 120upx;
          }
        }
      }

      .right {
        .redprice {
          font-size: 30upx;
          color: red;
          margin-right: 15upx;
        }
      }
    }

    .zunxingfuwu {
      margin-top: 100upx;
      padding-top: 10upx;

    }
  }
}

.yajinbox {


  .table {
    .shanchu {
      text-decoration: line-through;
    }

    .xianshi {
      color: red;
    }

    .text {
      margin-top: 20upx;
    }
  }
}


.quchecailiao {


  .quchecauliaobox {
    .quchecailiaoitem {
      .table {
        font-size: 20upx;
      }

      display: flex;
      margin-top: 15upx;
      border-bottom: 2upx solid #fefefe;

      .log {
        width: 40upx;
        height: 40upx;
        display: none;

        image {
          width: 100%;
          height: 100%;
        }

      }

      .content {
        flex: 1;
        margin-left: 10upx;
        line-height: 38upx;
        border-bottom: 1rpx solid #eee;
        padding-bottom: 15upx;

        .tit {
          font-weight: 700;
          font-size: 30upx;
        }

        .text {
          color: #666;
        }
      }
    }
  }
}

.uni-forms-item {
  align-items: center;
  margin-bottom: 0;
}

.vehicle-detail {
  text-align: center;
  float: right;
  color: #007aff;
  font-size: 30rpx;
  margin-right: 18px;
  width: 140rpx;
}

.quchefanghsi {
  margin-top: 25upx;


  .tishi {
    font-size: 24upx;
    color: #999;
  }
}

.feiyongmingxi {
  background-color: #FFf;
  border-radius: 0;
  padding: 0 40upx;

  button {
    float: right;
    margin: 40upx 0;
    //background-color: #007aff;
    color: #fff;
    font-size: 28upx;
    width: 160upx;
    height: 70upx;
    line-height: 70upx;
  }

  .content {
    .fybox {
      border-bottom: 1upx solid #eee;
      padding: 15upx 0;

      .feiyong {
        // line-height: 50upx;
        margin: 20upx 0;
        display: flex;
        justify-content: space-between;

        .title {
          font-weight: 700;
          font-size: 30upx;
        }

        .price {
          text-align: right;
          font-size: 30upx;

          .redprice {
            color: red;
            font-size: 46upx;
          }
        }
      }
    }
  }

}

.uni-numbox__value {
  color: #007aff !important;
  //font-size: 50upx !important;
}

.file-show {
  display: flex;
  flex-direction: column;
  gap: 10px;

  .view-filled {
    margin: 1rpx 20rpx;
    padding: 20rpx 10rpx;
    border-radius: 8px;
    border: 1px solid #eee;
    color: #999;
    text-align: center;
    font-size: 32rpx;
    height: 180rpx;
    align-items: center;
    position: relative;


    display: flex;
    flex-direction: row;

    .name {
      margin-left: 20upx;
      width: 80vw;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.popup-content {
  background-color: #fff;

  .title {
    font-weight: 700
  }

  .tabtop {
    display: flex;
    align-items: center;
    padding: 15upx 30upx 50upx 30upx;

    .tit {
      font-weight: 700;
      flex: 1;
      text-align: center;
    }
  }

  .content {
    .text {
      color: #999;
      font-size: 24upx;
      margin-top: 10upx;
    }

    .fyitem {
      margin: 20upx 0;

      .title {
        font-size: 30upx;
      }

      .fy {
        margin-top: 20upx;
        display: flex;
        justify-content: space-between;
        font-size: 26upx;
        color: #333;
      }
    }

    .fyitemdb {

      text-align: right;
      border-top: 1upx solid #ccc;
      padding: 20upx 0;

      .ddje {
        font-size: 30upx;
      }
    }
  }

  .miaoshu {
    width: 100%;

    .img {
      width: 100%;

      image {
        width: 100%;
      }
    }
  }
}

// .map {
// 			width: 100%;
// 			height: 200px;

// 			map {
// 				width: 100%;
// 				height: 100%;
// 			}
// 		}
.vehicle-name {
  font-size: 30rpx;
  font-weight: bold;
  color: #000;
  margin-bottom: 10rpx;
}

.vehicle-year-type {
  font-size: 32rpx;
  color: #9f9f9f;
}
</style>